// @import '../../assets/base/less/common.less';

// .sys-main-bg-earth {
//   height: 100%;
//   .them-title {
//     height: 6%;
//     background-color: @contentBackgroundColor;
//     padding: 0px 20px;
//     display: flex;
//     justify-content: center;
//     align-items: center;
//     position: relative;
//     cursor: pointer;
//     .current {
//       border-color: #0000ff;
//       // border: 1px solid #0000ff;
//       color: #0000ff;
//     }
//   }
//   .earth-body {
//     .posChar {
//       height: 20px;
//       width: 614px;
//       font-size: 16px;
//       // background-color: #0000ff;
//       position: absolute;
//       right: 20vw;
//       top: 30vh;
//       z-index: 10;
//       display: flex;
//       justify-content: space-around;
//     }
//     margin-top: 1%;
//     height: 92%;
//     // background-color: @contentBackgroundColor;
//     overflow-y: scroll;
//     &::-webkit-scrollbar {
//       display: none;
//     }
//     .body-chart {
//       display: flex;
//       .left-body {
//         width: 25%;
//       }
//       .center-body {
//         width: 49%;
//         background-color: #fff;
//         margin: 0 10px;
//         height: 990px;
//         .center-title {
//           height: 45px;
//           display: flex;
//           align-items: center;
//           justify-content: space-between;
//           margin: 0 15px;
//         }
//         .card {
//           width: 100%;
//           height: 160px;
//           display: flex;
//           justify-content: space-evenly;
//           &-item {
//             width: 32%;
//             height: 95%;
//             border: 1px solid #b1b2b3;
//             display: flex;
//             > img {
//               height: 65%;
//               margin-top: 20px;
//               margin-right: 10px;
//             }
//             .svgImg {
//               transform: rotate(90deg);
//               margin-top: -3px;
//               margin-left: 5px;
//             }
//           }
//         }
//       }
//       .right-body {
//         width: 25%;
//       }
//       .bloack1 {
//         width: 100%;
//         height: 320px;
//         background-color: #fff;
//         margin-bottom: 15px;
//         // border: 1px solid red;
//         &-title {
//           border-bottom: 1px dashed #f2f2f2;
//           height: 45px;
//           display: flex;
//           justify-content: space-between;
//           align-items: center;
//           .title-name {
//             line-height: 45px;
//             margin-left: 15px;
//             position: relative;
//             font-weight: 600;
//             &::after {
//               content: '';
//               background-color: #25b6b6;
//               display: block;
//               width: 3px;
//               height: 16px;
//               position: absolute;
//               top: 15px;
//               left: -15px;
//             }
//           }
//           .img-div {
//             width: 40px;
//             height: 40px;
//             background: url('../../../../assets/base/images/quanqou/u991.png')
//               no-repeat 0 0;
//             background-size: 40px;
//             transform: rotate(90deg);
//             cursor: pointer;
//           }
//         }
//         .radio-pos {
//           text-align: right;
//           margin-top: 10px;
//           margin-right: 10px;
//         }
//         .ant-radio-button-wrapper {
//           height: 28px;
//           line-height: 28px;
//         }
//       }
//       .center-body1 {
//         width: 49%;
//         background-color: #fff;
//         margin: 0 10px;
//         height: 655px;
//         .center-title {
//           height: 45px;
//           display: flex;
//           align-items: center;
//           justify-content: space-between;
//           margin: 0 15px;
//         }
//         .card {
//           width: 100%;
//           height: 160px;
//           display: flex;
//           justify-content: space-evenly;
//           &-item {
//             width: 32%;
//             height: 95%;
//             border: 1px solid #b1b2b3;
//             display: flex;
//             > img {
//               height: 65%;
//               margin-top: 20px;
//               margin-right: 10px;
//             }
//             .svgImg {
//               transform: rotate(90deg);
//               margin-top: -3px;
//               margin-left: 5px;
//             }
//           }
//         }
//       }
//     }
//     .earth-bottom {
//       height: 450px;
//       background-color: #fff;
//       .btm-title {
//         height: 45px;
//         border-bottom: 1px dashed #f2f2f2;
//         line-height: 45px;
//         display: flex;
//         justify-content: space-between;
//         align-items: center;
//         .title-name {
//           line-height: 45px;
//           margin-left: 15px;
//           position: relative;
//           font-weight: 600;
//         }
//         .img-div {
//           width: 40px;
//           height: 40px;
//           background: url('../../../../assets/base/images/quanqou/u991.png')
//             no-repeat 0 0;
//           background-size: 40px;
//           transform: rotate(90deg);
//           cursor: pointer;
//         }
//       }
//       .btm-body {
//         padding: 10px;
//       }
//     }
//     .earth-bottom1 {
//       height: 400px;
//       overflow: auto;
//       background-color: #fff;
//       .btm-title {
//         height: 45px;
//         border-bottom: 1px dashed #f2f2f2;
//         line-height: 45px;
//         display: flex;
//         justify-content: space-between;
//         align-items: center;
//         .title-name {
//           line-height: 45px;
//           margin-left: 15px;
//           position: relative;
//           font-weight: 600;
//         }
//         .img-div {
//           width: 40px;
//           height: 40px;
//           background: url('../../../../assets/base/images/quanqou/u991.png')
//             no-repeat 0 0;
//           background-size: 40px;
//           transform: rotate(90deg);
//           cursor: pointer;
//         }
//       }
//       .btm-body {
//         padding: 10px;
//       }
//     }
//     .details {
//       height: 100%;
//       background-color: #fff;
//       .details-title {
//         height: 45px;
//         border-bottom: 1px dashed #f2f2f2;
//         line-height: 45px;
//         display: flex;
//         justify-content: space-between;
//         align-items: center;
//         .title-name {
//           :nth-child(1) {
//             line-height: 45px;
//             margin-left: 15px;
//             position: relative;
//             font-weight: 600;
//           }
//           img {
//             width: 16px;
//             height: 16px;
//             margin-left: 10px;
//             cursor: pointer;
//           }
//           display: flex;
//           align-items: center;
//         }
//         .img-div {
//           width: 40px;
//           height: 40px;
//           background: url('../../../../assets/base/images/quanqou/u991.png')
//             no-repeat 0 0;
//           background-size: 40px;
//           // transform: rotate(90deg);
//           cursor: pointer;
//         }
//       }
//       .selectForm {
//         margin-top: 10px;
//         margin-right: 30px;
//         display: flex;
//         justify-content: end;
//         align-items: center;
//       }
//     }
//   }
//   .earth-body1 {
//     margin-top: 1%;
//     height: 92%;
//     // background-color: @contentBackgroundColor;
//     overflow-y: scroll;
//     &::-webkit-scrollbar {
//       display: none;
//     }
//     .body-chart {
//       display: flex;
//       .left-body {
//         width: 25%;
//       }
//       .center-body {
//         width: 49%;
//         background-color: #fff;
//         margin: 0 10px;
//         height: 990px;
//         .center-title {
//           height: 45px;
//           display: flex;
//           align-items: center;
//           justify-content: space-between;
//           margin: 0 15px;
//         }
//         .card {
//           width: 100%;
//           height: 160px;
//           display: flex;
//           justify-content: space-evenly;
//           &-item {
//             width: 32%;
//             height: 95%;
//             border: 1px solid #b1b2b3;
//             display: flex;
//             > img {
//               height: 65%;
//               margin-top: 20px;
//               margin-right: 10px;
//             }
//             .svgImg {
//               transform: rotate(90deg);
//               margin-top: -3px;
//               margin-left: 5px;
//             }
//           }
//         }
//         #u1044_img {
//           border-width: 0px;
//           position: absolute;
//           left: 0px;
//           top: 0px;
//           width: 763px;
//           height: 388px;
//         }
//       }
//       .right-body {
//         width: 25%;
//       }
//       .bloack1 {
//         width: 100%;
//         height: 370px;
//         background-color: #fff;
//         margin-bottom: 15px;
//         // border: 1px solid red;
//         &-title {
//           border-bottom: 1px dashed #f2f2f2;
//           height: 45px;
//           display: flex;
//           justify-content: space-between;
//           align-items: center;
//           .title-name {
//             line-height: 45px;
//             margin-left: 15px;
//             position: relative;
//             font-weight: 600;
//             &::after {
//               content: '';
//               background-color: #25b6b6;
//               display: block;
//               width: 3px;
//               height: 16px;
//               position: absolute;
//               top: 15px;
//               left: -15px;
//             }
//           }
//           .img-div {
//             width: 40px;
//             height: 40px;
//             background: url('../../../../assets/base/images/quanqou/u991.png')
//               no-repeat 0 0;
//             background-size: 40px;
//             transform: rotate(90deg);
//             cursor: pointer;
//           }
//         }
//         .radio-pos {
//           text-align: right;
//           margin-top: 10px;
//           margin-right: 10px;
//         }

//         .ant-radio-button-wrapper {
//           height: 28px;
//           line-height: 28px;
//         }
//       }
//       .center-body1 {
//         width: 49%;
//         background-color: #fff;
//         margin: 0 10px;
//         height: 755px;
//         .center-title {
//           height: 45px;
//           display: flex;
//           align-items: center;
//           justify-content: space-between;
//           margin: 0 15px;
//         }
//         .card {
//           width: 100%;
//           height: 160px;
//           display: flex;
//           justify-content: space-evenly;
//           &-item {
//             width: 32%;
//             height: 95%;
//             border: 1px solid #b1b2b3;
//             display: flex;
//             > img {
//               height: 65%;
//               margin-top: 20px;
//               margin-right: 10px;
//             }
//             .svgImg {
//               transform: rotate(90deg);
//               margin-top: -3px;
//               margin-left: 5px;
//             }
//           }
//         }
//       }
//     }
//     .earth-bottom {
//       height: 450px;
//       background-color: #fff;
//       .btm-title {
//         height: 45px;
//         border-bottom: 1px dashed #f2f2f2;
//         line-height: 45px;
//         display: flex;
//         justify-content: space-between;
//         align-items: center;
//         .title-name {
//           line-height: 45px;
//           margin-left: 15px;
//           position: relative;
//           font-weight: 600;
//         }
//         .img-div {
//           width: 40px;
//           height: 40px;
//           background: url('../../../../assets/base/images/quanqou/u991.png')
//             no-repeat 0 0;
//           background-size: 40px;
//           transform: rotate(90deg);
//           cursor: pointer;
//         }
//       }
//       .btm-body {
//         padding: 10px;
//       }
//     }
//     .earth-bottom1 {
//       height: 400px;
//       overflow: auto;
//       background-color: #fff;
//       .btm-title {
//         height: 45px;
//         border-bottom: 1px dashed #f2f2f2;
//         line-height: 45px;
//         display: flex;
//         justify-content: space-between;
//         align-items: center;
//         .title-name {
//           line-height: 45px;
//           margin-left: 15px;
//           position: relative;
//           font-weight: 600;
//         }
//         .img-div {
//           width: 40px;
//           height: 40px;
//           background: url('../../../../assets/base/images/quanqou/u991.png')
//             no-repeat 0 0;
//           background-size: 40px;
//           transform: rotate(90deg);
//           cursor: pointer;
//         }
//       }
//       .btm-body {
//         padding: 10px;
//       }
//     }
//     .details {
//       height: 100%;
//       background-color: #fff;
//       .details-title {
//         height: 45px;
//         border-bottom: 1px dashed #f2f2f2;
//         line-height: 45px;
//         display: flex;
//         justify-content: space-between;
//         align-items: center;
//         .title-name {
//           :nth-child(1) {
//             line-height: 45px;
//             margin-left: 15px;
//             position: relative;
//             font-weight: 600;
//           }
//           img {
//             width: 16px;
//             height: 16px;
//             margin-left: 10px;
//             cursor: pointer;
//           }
//           display: flex;
//           align-items: center;
//         }
//         .img-div {
//           width: 40px;
//           height: 40px;
//           background: url('../../../../assets/base/images/quanqou/u991.png')
//             no-repeat 0 0;
//           background-size: 40px;
//           // transform: rotate(90deg);
//           cursor: pointer;
//         }
//       }
//       .selectForm {
//         margin-top: 10px;
//         margin-right: 30px;
//         display: flex;
//         justify-content: end;
//         align-items: center;
//       }
//     }
//   }
// }

.trade-content {
  color: #000;
  width: 100%;
  height: 100%;
  padding-left: 10px;
  box-sizing: border-box;
  overflow: hidden;
  .top-box {
      width: 100%;
      margin-bottom: 10px;
      .left-box {
          width: calc(50% - 5px);
          display: inline-block;
          background: #fff;
          margin-right: 10px;
          padding: 10px 35px;
          box-sizing: border-box;
          .count-box {
              .title {
                  font-size: 14px;
                  color: #333;
              }
              .counts-box {
                  margin-top: 20px;
                  text-align: center;
                  .count {
                      color: #25B6B6;
                      font-size: 40px;
                  }
                  .unit {
                      font-size: 12px;
                      margin-left: 30px;
                  }
              }
              .percent-box {
                  text-align: right;
                  .left {
                      margin-right: 20px;
                  }
                  .right {
                      color: #D9001B;
                  }
              }
          }
      }
      .right-box {
          width: calc(50% - 5px);
          display: inline-block;
          background: #fff;
          padding: 10px 35px;
          box-sizing: border-box;
          .count-box {
              .title {
                  font-size: 14px;
                  color: #333;
              }
              .counts-box {
                  margin-top: 20px;
                  text-align: center;
                  .count {
                      color: #5178FF;
                      font-size: 40px;
                  }
                  .unit {
                      font-size: 12px;
                      margin-left: 30px;
                  }
              }
              .percent-box {
                  text-align: right;
                  .left {
                      margin-right: 20px;
                  }
                  .right {
                      color: #D9001B;
                  }
              }
          }
      }
  }
  .center-box {
      width: 100%;
      height: calc((100% - 190px) / 2);
      padding: 10px 35px;
      box-sizing: border-box;
      margin-bottom: 10px;
      background: #fff;
      .title {
          font-size: 14px;
                  color: #333;
      }
      #tradeCenterChart {
          width: 100%;
          height: calc(100% - 50px);
          margin-top: 20px;
      }
  }
  .bottom-box {
      width: 100%;
      height: calc((100% - 180px) / 2);
      padding: 10px 35px;
      box-sizing: border-box;
      background: #fff;
      .title {
          font-size: 14px;
                  color: #333;
      }
      #tradeBottomChart {
          width: 100%;
          height: calc(100% - 50px);
          margin-top: 20px;
      }
  }
}
